<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-show="loading">Loading...</dv-loading>
      <div class="host-body">
        <dvborder />
        <el-row>
          <el-col :span="2" class="box_H box_max">
            <!-- <leftBox /> -->
          </el-col>
          <el-col :span="20">
            <chinaMap v-if="!loading" :data-list="dataList" :lableres="Lableres" @getContentList="getContentList" />
          </el-col>
          <el-col :span="2" class="box_H">
            <!-- <rightBox :dataList="dataList" @getContentList="getContentList" v-if="!loading"/> -->
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="24" class="bottom_box1">
            <bottomBox />
          </el-col>
        </el-row> -->
        <!-- 底部标签-->
        <!-- <bottomTag /> -->
        <!-- 底部日期 -->
        <bottomLine />
      </div>
    </div>
    <articleDialog />
    <articleDialogImg ref="articleDialogImg" />
  </div>
</template>

<script>
import drawMixin from '../../utils/drawMixin' // 自适应缩放
import dvborder from './components/dvborder' // 头部组件
import bottomLine from './components/bottomLine' // 底部组件
// import tableone from './components/tableone.vue' // 第一列组件
// import tabletwo from './components/tabletwo.vue' // 第二列组件
import chinaMap from './components/chinaMap.vue' // 地图组件
// import bottomBox from './components/bottomBox.vue'

import leftBox from './components/leftBox' // 左边组件
import rightBox from './components/rightBox' // 右边组件
import bottomTag from './components/bottomTag' // 底部标签组件
import articleDialog from './components/articleDialog' // 项目介绍弹窗
import articleDialogImg from './components/articleDialogImg' // 项目介绍弹窗包括图片
import { getDataApi, getDataIDApi } from '@/api/user'

export default {
  name: 'Dashboard',
  components: {
    dvborder,
    // tableone,
    // tabletwo,
    // bottomBox
    chinaMap,
    leftBox,
    bottomLine,
    bottomTag,
    rightBox,
    articleDialog,
    articleDialogImg
  },
  mixins: [drawMixin],
  data() {
    return {
      loading: false,
      dialogVisible: true,
      dataList: [],
      Lableres: [],
      elon: [
        [95.24, 48], [95.24, 33], [135.24, 53], [95.24, 39], [95.24, 51],
        [140.24, 50], [140.24, 48], [140.24, 46],
        [139.24, 44], [138.24, 42], [138.24, 40], [136.3, 38], [135.24, 36],
        [133.24, 34], [135.24, 32], [135.24, 30], [135.24, 28], [133.24, 26],
        [131.24, 24], [133.24, 22], [101.24, 20], [136.3, 20],
        [100.24, 22], [100.64, 18], [116.24, 20], [120.24, 26], [120.24, 24],
        [123, 22], [120.24, 28], [115.24, 26], [115.24, 24.5], [115.24, 23],
        [115.24, 21.5], [115.24, 20]]
    }
  },
  created() {
    this.getDataId()
    // this.cancelLoading()
  },
  methods: {
    // 获取地图详情数据
    getContentList(id) {
      this.$refs.articleDialogImg.handLoad(id)
    },
    // 按钮传参渲染页面
    async getDataId(code) {
      this.loading = true
      await getDataIDApi({ type: code, projectType: 2[
        {
          'id': 36,
          'projectType': 2,
          'name': '中药材/淫羊藿、连翘等产业数字化、城运中心',
          'geoInfo': '108.6642, 31.9476',
          'link': null,
          'province': null,
          'provinceOnly': '浙江省',
          'type': null,
          'deviceType': null,
          'bdm': null,
          'description': null
        }
      ] })
      // 获得数据进一步处理
        .then(Lableres => {
          this.dataList = Lableres
          // console.log(Lableres, '我是点击数据')
          // this.res = []
          // // for循环根据渲染需求注入新数组res
          // for (var i = 0; i < Lableres.length; i++) {
          //   this.Lableres.push({
          //     name: Lableres[i].name, // 项目名
          //     // 线条起点和终点
          //     coords: [
          //       Lableres[i].geoInfo.split(','), // 起点经纬度
          //       this.elon[i] // 终点经纬度————决定文本框标签在哪
          //     ],
          //     id: Lableres[i].id
          //     // value: Lableres[i].value // 数据
          //   })
          // }
          this.loading = false
        })
    },
    // 加载图
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
//全局样式部分！！！！
* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  outline: none;
  box-sizing: border-box;
}
html {
  margin: 0;
  padding: 0;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.2em;
  background-color: #f1f1f1;
  margin: 0;
  padding: 0;
}
a {
  color: #343440;
  text-decoration: none;
}
.box_max {
  height: 922px !important;
}
//--------------------------------------------

//页面样式部分！！！！
#index {
  // color: #d3d6dd;
  // width: 1920px;
  // height: 1060px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  // box-sizing: border-box;
  overflow: hidden;
  .bg {
    //整体页面背景
  width: 1920px;
  height: 1080px;
  overflow: hidden;
    // padding: 16px 16px 0 16px;
    background-image: url("../../assets/background.jpg"); //背景图
    background-color: #fff;
    background-size: 1920px 1080px; //背景尺寸
    background-position: center center; //背景位置

  }
  .host-body {
    // margin-top: 20px;
    height: 100%;
    // margin-bottom:50px ;
  }
  .box_H {
    height: 660px;
    z-index: 100;
  }
}
.banner {
  text-align: center;
}
.bottom_box1 {
  height: 250px;
  // width: 95%;
  padding-top: 30px;
}
</style>
